<template>
  <div v-loading="loading" class="app-container" style="margin-left: 20px">
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="质量趋势" name="0">
        <div class="filter-container">
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="mark_i">
                <span
                  style="font-size: 15px; font-weight: bold; margin-left: 10px"
                  class="mark-item"
                >自然周趋势</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="2" style="margin-left: 30px" />
        <div class="project-chart" style="margin: 30px">
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="mark_chart">
                <span
                  style="font-size: 15px; font-weight: bold; margin-left: 10px"
                  class="mark-item"
                >项目数统计</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10" style="margin-top: 30px">
            <el-col :span="24" align="center">
              <div class="chart-container">
                <Zxs :chart-data="project_demand_trend" />
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="mark_chart">
                <span
                  style="font-size: 15px; font-weight: bold; margin-left: 10px"
                  class="mark-item"
                >bug率统计</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10" style="margin-top: 30px">
            <el-col :span="24" align="center">
              <div class="chart-container">
                <Zxf :chart-data="bug_rate_trend" />
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="mark_chart">
                <span
                  style="font-size: 15px; font-weight: bold; margin-left: 10px"
                  class="mark-item"
                >发布成功率统计</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10" style="margin-top: 30px">
            <el-col :span="24" align="center">
              <div class="chart-container">
                <Zxf :chart-data="release_rate_trend" />
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="mark_chart">
                <span
                  style="font-size: 15px; font-weight: bold; margin-left: 10px"
                  class="mark-item"
                >无效修复率统计</span>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="10" style="margin-top: 30px">
            <el-col :span="24" align="center">
              <div class="chart-container">
                <Zxf :chart-data="invalid_rate_trend" />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>

      <el-tab-pane label="质量数据" name="1">
        <el-tabs v-model="default_tab_name" type="card" @tab-click="handleClick">
          <el-tab-pane label="质量数据总览" name="1">
            <div class="filter-container">
              <el-row :gutter="10">
                <el-col :span="24">
                  <div class="mark_i">
                    <span
                      style="font-size: 15px; font-weight: bold; margin-left: 10px"
                      class="mark-item"
                    >总览</span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-date-picker
                v-model="dateValue"
                type="daterange"
                style="margin-left: 30px;"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                @change="collectSumData"
              />
            </div>
            <div class="project-chart" style="margin-left: 30px;margin-right: 30px;margin-top: 10px;">
              <el-row :gutter="10">
                <el-col :span="24">
                  <div class="mark_chart">
                    <span
                      style="font-size: 15px; font-weight: bold; margin-left: 10px"
                      class="mark-item"
                    >需求及变更次数、项目需求类型统计</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 30px">
                <el-col :span="12" align="center">
                  <div class="chart-container">
                    <Bt :chart-data="demand_change" />
                  </div>
                </el-col>
                <el-col :span="12" align="center">
                  <div class="chart-container">
                    <Zz :chart-data="demand_type" />
                  </div>
                </el-col>
              </el-row>

              <el-row :gutter="10">
                <el-col :span="24">
                  <div class="mark_chart">
                    <span
                      style="font-size: 15px; font-weight: bold; margin-left: 10px"
                      class="mark-item"
                    >项目及工时、参与项目数统计</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 30px">
                <el-col :span="24" align="center">
                  <div class="chart-container">
                    <Zh_zz_zx :chart-data="projectTimechartData" />
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="24">
                  <div class="mark_chart">
                    <span
                      style="font-size: 15px; font-weight: bold; margin-left: 10px"
                      class="mark-item"
                    >bug率相关统计</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 30px">
                <el-col :span="24" align="center">
                  <div class="chart-container">
                    <Zx :chart-data="bug_rate" />
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="24">
                  <div class="mark_chart">
                    <span
                      style="font-size: 15px; font-weight: bold; margin-left: 10px"
                      class="mark-item"
                    >bug修复率相关统计</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 30px">
                <el-col :span="24" align="center">
                  <div class="chart-container">
                    <Zx :chart-data="bug_repair_rate" />
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="24">
                  <div class="mark_chart">
                    <span
                      style="font-size: 15px; font-weight: bold; margin-left: 10px"
                      class="mark-item"
                    >准入/出率、发布成功率统计</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 30px">
                <el-col :span="24" align="center">
                  <div class="chart-container">
                    <Zx :chart-data="admittanceOut" />
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="24">
                  <div class="mark_chart">
                    <span
                      style="font-size: 15px; font-weight: bold; margin-left: 10px"
                      class="mark-item"
                    >按时准入/出率、发布准时率计</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 30px">
                <el-col :span="24" align="center">
                  <div class="chart-container">
                    <Zx :chart-data="onTimeAdmittanceOut" />
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="项目组数据" name="2">
            <div class="filter-container">
              <el-row :gutter="10">
                <el-col :span="24">
                  <div class="mark">
                    <span
                      style="font-size: 15px; font-weight: bold; margin-left: 10px"
                      class="mark-item"
                    >项目组数据</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <proQual ref="proQual" />
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>

      <el-tab-pane label="人员质量情况" disabled name="3">
        <el-row :gutter="10">
          <el-col :span="24">
            <div style="padding-left: 5px; padding-right: 5px;" class="mark">
              <span
                style="font-size: 15px; font-weight: bold; margin-left: 10px"
                class="mark-item"
              >总览</span>
              <div class="filter-container" style="margin: 20px">
                <el-row :gutter="50">
                  <el-col :span="12" style="margin-left: 10px">
                    <el-select
                      v-model="listQuery.group_name"
                      clearable
                      placeholder="业务线"
                      @change="personnelRateGroupN"
                    >
                      <el-option
                        v-for="item in personnel_rate_group_list"
                        :key="item.group"
                        :label="item.group"
                        :value="item.group"
                      />
                    </el-select>
                  </el-col>
                </el-row>
              </div>
              <div class="project-chart" style="margin: 30px">
                <el-row :gutter="10">
                  <el-col :span="24">
                    <div class="mark_chart">
                      <span
                        style="font-size: 15px; font-weight: bold; margin-left: 10px"
                        class="mark-item"
                      >人员bug率统计</span>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="10" style="margin-top: 30px">
                  <el-col :span="24" align="center">
                    <div class="chart-container">
                      <Zh_zz_zx2 :chart-data="personnelQualitySituation" />
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>

          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="项目周报" name="4">
        <div class="filter-container">
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="mark">
                <span
                  style="font-size: 15px; font-weight: bold; margin-left: 10px"
                  class="mark-item"
                >项目周报</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="10">
            <el-col :span="24">
              <div>
                <el-button
                  v-if="admin_show"
                  type="primary"
                  @click="weekReport(0)"
                >创建</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="filter-container" style="margin-top: 20px">
          <el-table
            :key="tableKey"
            :header-cell-style="{ background: 'dodgerblue', color: '#eeeeee' }"
            :data="list"
            fit
            :cell-style="cellStyle"
            style="width: 100%"
            align="center"
          >
            <el-table-column label="日期" width="220px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.create_time }}</span>
              </template>
            </el-table-column>

            <el-table-column label="项目数量" width="120px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.collects_count }}</span>
              </template>
            </el-table-column>

            <el-table-column label="Bug率" width="100px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.whole_bug_rate }}</span>
              </template>
            </el-table-column>

            <el-table-column label="修复率" width="100px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.whole_fixrate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="无效修改率" width="100px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.whole_unfixrate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发布成功率" width="100px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.whole_onlinerate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="bug总数" width="80px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.whole_bugcount }}</span>
              </template>
            </el-table-column>

            <el-table-column label="最后更新" width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.update_time }}</span>
              </template>
            </el-table-column>

            <el-table-column label="更新人" width="100px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.last_operator }}</span>
              </template>
            </el-table-column>

            <el-table-column label="创建时间" width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.create_date }}</span>
              </template>
            </el-table-column>

            <el-table-column label="创建人" width="100px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.creater }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="280px">
              <template slot-scope="{ row }">
                <el-button
                  type="info"
                  size="mini"
                  @click="weekReport(row)"
                >详情</el-button>
                <el-button
                  v-if="edit_show"
                  type="success"
                  size="mini"
                  @click="editWeekReport(row)"
                >编辑</el-button>
                <el-button
                  v-if="admin_show"
                  type="danger"
                  size="mini"
                  @click="delReport(row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <WR
      v-if="weekreport_show"
      ref="popBox"
      :report_data="report_data"
      destroy-on-close="true"
      @closePop="closePop"
    />
  </div>
</template>

<script>
import Zh_zz_zx from './components/mix-chart'
import Zh_zz_zx2 from './components/mix-chart2'
import Zx from './components/MixLineChart'
import Zxs from './components/MixLineChart2'
import Zxf from './components/MixLineChart3'
import Zz from './components/LineChart'
import Bt from './components/PanelGroup'
import WR from './components/weekreport'
import proQual from './components/pro_quality'
import { collectSum, getWeeklyList, deleteWeekly, collectTrend, personnelRate, personnelRateGroupList } from '@/api/quality'
import { getInfo } from '@/api/user'
import { getToken } from '@/utils/auth'
import { Message } from 'element-ui'
export default {
  name: 'MixChart',
  components: {
    Zh_zz_zx,
    Zh_zz_zx2,
    Zx,
    Zxs,
    Zxf,
    Zz,
    Bt,
    WR,
    proQual
  },
  data() {
    return {
      // charQuery: {
      //   // group_name: '经销商',
      //   radio: '周'
      // },
      dateValue: [],
      tableKey: 0,
      report_data: {
        title: '生成周报',
        edit: true,
        pid: 1
      },
      default_tab_name: '1',
      list: [],
      weekreport_show: false,
      loading: true,
      admin_show: false,
      edit_show: false,
      upower: 0,
      demand_change: {},
      demand_type: {
        series: [
          {
            type: 'bar'
          }
        ]
      },
      test: '',
      labelPosition: 'right',
      listQueryWeekly: {
        page_num: 1,
        page_per: 10,
        start_time: '',
        end_time: ''
      },
      collectSumDataQuery: {
        start_time: '',
        end_time: ''
      },
      projectTimechartData: {},
      admittanceOut: {},
      onTimeAdmittanceOut: {},
      bug_rate: {},
      bug_repair_rate: {},
      user_name: '',
      project_demand_trend: {},
      bug_rate_trend: {},
      invalid_rate_trend: {},
      release_rate_trend: {},
      personnel_rate_group_list: [],
      listQuery: {
        group_name: '',
        project_name: '',
        page_num: 1,
        page_per: 10
      },
      personnelQualitySituation: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === '0') {
        this.collectTrend()
      } else if (tab.name === '1') {
        this.collectSumData()
      } else if (tab.name === '2') {
        console.log(2222, this.dateValue)
        this.$refs.proQual.getProListData()
      } else if (tab.name === '3') {
        this.personnelRateGroupL()
        this.personnelRateGroupN()
      } else if (tab.name === '4') {
        getWeeklyList(this.listQueryWeekly).then((response) => {
          this.list = response.data.items
        })
      }
    },
    collectSumData() {
      this.loading = true
      if (!this.dateValue || JSON.stringify(this.dateValue) === '[]') {
        this.collectSumDataQuery.start_time = ''
        this.collectSumDataQuery.end_time = ''
      } else {
        this.collectSumDataQuery.start_time = this.dateValue[0]
        this.collectSumDataQuery.end_time = this.dateValue[1]
      }
      collectSum(this.collectSumDataQuery).then((response) => {
        this.projectTimechartData = response.data.dic_projects_working_time
        this.admittanceOut = response.data.dic_admittance_out
        this.onTimeAdmittanceOut = response.data.dic_on_time_release
        this.demand_change = response.data.demand_change
        this.demand_type = response.data.demand_type
        this.bug_rate = response.data.bug_rate
        this.bug_repair_rate = response.data.bug_repair_rate
        setTimeout(() => {
          this.loading = false
        }, 0.2 * 1000)
      })
    },
    delReport(row) {
      if (this.power()) {
        deleteWeekly(row.id)
          .then((res) => {
            Message.success(res.message)
            this.getWeekly()
          })
          .catch((error) => {
            Message.error(error.msg || error.message || error.value)
          })
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (
        (columnIndex === 2) |
        (columnIndex === 3) |
        (columnIndex === 4) |
        (columnIndex === 5)
      ) {
        return 'background:#F7FCDD'
      }
    },
    getWeekly() {
      getWeeklyList(this.listQueryWeekly).then((response) => {
        this.list = response.data.items
      })
    },
    getData() {
      getInfo(getToken()).then((res) => {
        this.upower = res.data.access_level
        this.user_name = res.data.name
        if (this.upower === 80) {
          this.admin_show = true
          this.edit_show = true
        } else if (this.upower === 70) {
          this.edit_show = true
        }
      })
      this.collectTrend()
      // this.collectSumData()
    },
    collectTrend() {
      this.loading = true
      collectTrend().then((response) => {
        this.project_demand_trend = response.data.project_demand_trend
        this.bug_rate_trend = response.data.bug_rate_trend
        this.invalid_rate_trend = response.data.invalid_rate_trend
        this.release_rate_trend = response.data.release_rate_trend
        setTimeout(() => {
          this.loading = false
        }, 0.2 * 1000)
      })
    },
    power() {
      if (this.upower >= 70) {
        return true
      } else {
        Message.error('权限不足')
        return
      }
    },
    weekReport(num) {
      if (num === 0) {
        if (this.power()) {
          this.weekreport_show = true
        }
        this.report_data = {
          title: '生成周报',
          edit: true,
          admin: true,
          id: '',
          user_name: this.user_name
        }
      } else {
        this.weekreport_show = true
        this.report_data = {
          title: num.create_time + '周报',
          edit: false,
          admin: false,
          id: num.id
        }
      }
    },
    editWeekReport(num) {
      if (this.power()) {
        this.weekreport_show = true
        this.report_data = {
          title: num.create_time + '周报-编辑',
          edit: true,
          admin: false,
          id: num.id,
          user_name: this.user_name
        }
      }
    },
    closePop() {
      this.weekreport_show = false
      this.getWeekly()
    },
    personnelRateGroupL() {
      personnelRateGroupList()
        .then((res) => {
          this.personnel_rate_group_list = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },

    personnelRateGroupN(groupName) {
      console.log(groupName)
      if (!groupName !== true) {
        this.group = groupName
      } else {
        this.group = 'all'
      }
      personnelRate(this.group).then((response) => {
        this.personnelQualitySituation = response.data.dic_projects_working_time
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.mark {
  border-radius: 4px;
  margin: 10px 0 30px;
  background-color: rgba(175, 196, 225, 0.8);
  height: 30px;
  line-height: 30px;
  color: #fff;
}
.mark_i {
  border-radius: 4px;
  margin: 10px 0 0px;
  background-color: rgba(175, 196, 225, 0.8);
  height: 30px;
  line-height: 30px;
  color: #fff;
}
.mark_chart {
  border-radius: 4px;
  background-color: #a5e7f0;
  height: 30px;
  line-height: 30px;
  color: #fff;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 60%;
}
.date_picker{
    position: absolute;left:250px;top:17px;
    font-weight: 600;
}
</style>
